{literal}
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 60px; line-height: 1.2em; }
.ui-state-highlight { height: 60px; line-height: 1.2em; }
</style>
{/literal}

{include file="stddecor.form.open.tpl" }
<table cellspacing="0" class="objHeader">
<tr>
    <td class="objHeader-td-icon"><img src="{$SPIcfg.dir.pubsite_styles|escape}manage/image/topic_icons/{$data.topic|escape}_{$data.tmode|escape}.{if $data.tmode == 'catalog'}png{else}gif{/if}" /></td>
    <td class="objHeader-td-header">
        <div>
            <h1>{$data.title|escape}</h1>
            <h2>{$data.subtitle|escape}</h2>
        </div>

        <div class="objHeader-action_buttons">
            <div class="right">{include file="obj.button.tpl" name="Назад" link=$data.link_back icon="back" }</div>
            <br class="clear" />
        </div>
    </td>
</tr>
</table>
{include file="stddecor.form.close.tpl" }

{* ************************************************************************* *}

{include file="stddecor.form.open.tpl" }

<div style="padding: 0 80px;">
    <ul id="sortable">
        {foreach from=$data.items key=item_id item=item name=list }
            <li class="ui-state-default sortitem" item_id="{$item.id|escape}">
                <table border="0" cellspacing="0" cellpadding="0" height="60" width="100%">
                <tr>
                    <td width="45" style="padding-left:10px;"><span class="sortitem-index">{$smarty.foreach.list.iteration|escape}</span></td>
                    <td width="100">
                        {if $item.preview }
                            <img src="{$item.preview|spiMediaPreview:80:60|escape}" />
                        {else}
                            <span class="tiny light">&lt;нет фото&gt;</span>
                        {/if}
                    </td>
                    <td>{$item.name|escape}</td>
                </tr>
                </table>
                
            </li>
        {/foreach}
    </ul>
</div>

<div class="splitter padded"></div>

<form id="sort_submit_form" method="post" action="{$data.link_form_submit|escape}">
    {foreach from=$data.formvars key=varname item=varvalue }
    <input type="hidden" name="{$varname|escape}" value="{$varvalue|escape}" />
    {/foreach}
    <input type="hidden" id="sort_submit_value" name="new_sort_order" value="" />
</form>

<center>
<table cellspacing="8" cellpadding="0">
<tr>
    <td>{include file="obj.button.tpl" name="Сохранить" onclick="sortable__submit()" icon="save" }</td>
    <td width="25">&nbsp;</td>
    <td>{include file="obj.button.tpl" name="Отменить" link=$data.link_back icon="cancel" }</td>
</tr>
</table>

</center>


{include file="stddecor.form.close.tpl" }

{literal}
<script>

function sortable__reindex_list()
{
    var index=1;

    $('.sortitem .sortitem-index').each( function()
    {
        $(this).html( index++ );
    } );

    return true;
}

function sortable__submit()
{
    var result = '';

    $('.sortitem').each( function()
    {
        result += $(this).attr('item_id')+',';
    } );

    $('#sort_submit_value').attr('value',result);
    $('#sort_submit_form').submit();

    return true;
}

function sortable__init()
{
    $("#sortable").sortable( {
        placeholder: 'ui-state-highlight',
        stop: sortable__reindex_list
    } );

    $("#sortable").disableSelection();

    return true;
}

sortable__init();

</script>

{/literal}